<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <nav id="navigation"></nav>
    <main>
      <p>This paragraph is not rendered by React (open index.html to verify).</p>
      <section id="comments"></section>
    </main>

    <!-- <script type="module" src="./index.js"></script> -->
    <script type="module">
      // import { render } from 'react-dom';
      import React from url('https://cdn.bootcdn.net/ajax/libs/react/18.3.1/umd/react.production.min.js');
      import ReactDOM from url('https://cdn.bootcdn.net/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js');
     

      // function Navigation() {
      //   return (
      //     <ul>
      //       <NavLink href="/">Home</NavLink>
      //       <NavLink href="/about">About</NavLink>
      //     </ul>
      //   );
      // }

      // function NavLink({ href, children }) {
      //   return (
      //     <li>
      //       <a href={href}>{children}</a>
      //     </li>
      //   );
      // }

      // function Comments() {
      //   return (
      //     <>
      //       <h2>Comments</h2>
      //       <Comment text="Hello!" author="Sophie" />
      //       <Comment text="How are you?" author="Sunil" />
      //     </>
      //   );
      // }

      // function Comment({ text, author }) {
      //   return (
      //     <p>
      //       {text} — <i>{author}</i>
      //     </p>
      //   );
      // }

      function App() {
        // 使用JSX需要Babel转换
        // return (<h1> JSX h1 Hello, React!</h1>)

        // 没有 Babel 使用 React.createElement
        return React.createElement('h1', null, 'Hello, React!');
      }

      // 以下两种都可以
      // ReactDOM.render(React.createElement(App), document.getElementById('root'));
      ReactDOM.render(App(), document.getElementById('navigation'));

      // render(<Navigation />, document.getElementById('navigation'));
      // render(<Comments />, document.getElementById('comments'));
    </script>
  </body>
</html>
